<template>
    <div class="block-item">
        <div>
            <p><slot name="num"></slot></p>
            <p><slot name="desc"></slot></p>
        </div>
        <svg-icon :icon-class="icon"></svg-icon>
    </div>
</template>
<script>
    export default {
        name: "BlockItem",
        props:["icon"],
        data() {
            return {}
        }
    }
</script>
<style lang="scss" scoped>
    .block-item {
        width: 100%;
        overflow: hidden;
        box-shadow: 0 2px 12px 0 rgba(46, 54, 70, 0.1);
        height: 145px;
        color: #fff;
        padding: 40px 30px 30px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        p:first-child{
            font-size: 36px;
            font-weight: 700;
            text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
        }
        p:last-child{
            font-size: 16px;
            margin-top: 5px;
        }

    }
    svg{
        font-size: 46px;
        margin-top: 8px;
    }
</style>
